import { useEffect } from "react";
import { Table, Pagination, Tag } from "antd";
import { Button, Card as SemiCard } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { AllMembers } from "../_graphql";

const { Column } = Table;

export default function AllMembersPage() {
    const { windowInnerHeight, UTCTimeToLocal, graphqlFetch } = useModel("global");
    const { organizationUuid } = useModel("organization.info");

    const state = useReactive({
        loading: false,
        members: [],
        totalCount: 0,
        pageSize: 20,
        page: 1,
    });

    const loadMembers = async (first, offset) => {
        state.loading = true;
        let res = await graphqlFetch({
            query: AllMembers,
            variables: {
                first: first || state.pageSize,
                offset: offset || 0,
            },
        });
        if (res) {
            state.members = res?.a?.nodes || [];
            state.totalCount = res?.a?.totalCount || 0;
        }
        state.loading = false;
    };

    useEffect(() => {
        organizationUuid && loadMembers();
    }, [organizationUuid]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 53 - 60;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>全部成员列表</span>}
            headerExtraContent={<Button onClick={() => loadMembers()}>刷新</Button>}
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight }}
            footerStyle={{ padding: 0 }}
            footerLine={true}
            footer={
                <div style={{ padding: 14, display: "flex", justifyContent: "space-between" }}>
                    <div></div>
                    <Pagination
                        total={state.totalCount}
                        showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                        pageSize={state.pageSize}
                        current={state.page}
                        showSizeChanger={false}
                        onChange={(page, pageSize) => {
                            state.page = page;
                            loadMembers(pageSize, (page - 1) * pageSize);
                        }}
                    />
                </div>
            }
        >
            <Table loading={state.loading} bordered size="small" pagination={false} dataSource={state.members} rowKey="omUuid" scroll={{ y: cardBodyHeight - 40 }}>
                <Column title="序号" align="center" render={(_, r, i) => (state.page - 1) * state.pageSize + i + 1} width={60} />
                <Column title="成员姓名" dataIndex="omName" align="center" />
                <Column title="成员性别" dataIndex="omRoge" align="center" width={100} />
                <Column title="成员生日" dataIndex="omBirt" align="center" width={150} />
                <Column title="所属民族" dataIndex="omNati" align="center" width={100} />
                <Column title="内部成员？" dataIndex="omIfim" align="center" render={(_) => (_ ? "内部" : "外部")} />
                <Column title="职位名称" dataIndex="omPosi" align="center" />
                <Column title="外部组织名称" dataIndex="omEona" align="center" />
                <Column title="加入原由" dataIndex="omCaus" align="center" width={360} />
                <Column title="加入日期" dataIndex="omJoti" align="center" render={(_) => UTCTimeToLocal(_, "YYYY-MM-DD")} />
                <Column
                    title="成员状态"
                    dataIndex="omAust"
                    align="center"
                    render={(_) => {
                        //待认证，已认证，重新认证，自己退出，移除
                        let color;
                        if (_ === "待认证" || _ === "重新认证") color = "processing";
                        if (_ === "已认证") color = "success";
                        if (_ === "已退出" || _ === "已移除") color = "error";
                        return <Tag color={color}>{_}</Tag>;
                    }}
                />
            </Table>
        </SemiCard>
    );
}
